<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="105">
          <!--<FormItem label="ID">
            <Input size="small" v-model="id" disabled/>
          </FormItem>-->
          <FormItem label="">
            <Button class="m-r-5px" size="small" type="primary" @click="textEditorModalVisible = !textEditorModalVisible">文本编辑</Button>
          </FormItem>
          <FormItem label="悬浮文本">
            <Input size="small" v-model="title"/>
          </FormItem>
          <FormItem label="默认字体颜色">
            <PnColorPicker size="small" v-model="color" alpha recommend/>
          </FormItem>
          <FormItem label="滚动条">
            <Select transfer size="small" v-model="overflow">
              <Option v-for="item in $PnDict.overflows" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItemPanel title="文本滚动" v-if="marquee">
            <FormItem label="开启滚动">
              <i-switch v-model="marquee.open">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="向上滚动">
              <i-switch v-model="marquee.reverse">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="文本重复">
              <i-switch v-model="marquee.repeat">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="重复间距">
              <InputNumber size="small" :max="1000" :min="0" v-model="marquee.repeatMargin"></InputNumber>
            </FormItem>
            <FormItem label="滚动速度">
              <Tooltip content="数值越大，滚动速度越快" placement="left">
                <InputNumber size="small" :max="1000" :min="10" v-model="marquee.speed.number"></InputNumber>
              </Tooltip>
            </FormItem>
            <FormItem label="鼠标滑入暂停">
              <i-switch v-model="marquee.hoverPause">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
          </FormItemPanel>
          <Alert show-icon style="padding-right: 10px;" v-else>当前版本不支持文本滚动，请升级组件</Alert>

        </Form>

      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

    <Modal
        v-model="textEditorModalVisible"
        draggable
        scrollable
        title="文本编辑"
        width="850"
        :mask="true"
        :z-index="3">
      <vue-ueditor-wrap v-if="textEditorModalVisible" @ready="uEditorReady" :destroy="true" v-model="text" :config="uEditorConfig"></vue-ueditor-wrap>
      <div slot="footer">
        <Button type="default" @click="textEditorModalVisible = false">关闭</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'RichTextCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        textEditorModalVisible: false,

        editorInstance: null,
        uEditorConfig: {
          // 初始容器高度
          initialFrameHeight: 240,
          // 初始容器宽度
          initialFrameWidth: '100%',
          UEDITOR_HOME_URL: window.g.PROJECT_ROOT_NAME + '/static/UEditor/'
        }
      }
    },
    mounted() {

    },
    methods: {
      uEditorReady (editorInstance) {
        this.editorInstance = editorInstance
      }
    },
    computed: {
      ...mapFields({

        title: 'component.compConfigData.title',
        text: 'component.compConfigData.text',

        color: 'component.compConfigData.color',
        overflow: 'component.compConfigData.overflow',

        marquee: 'component.compConfigData.marquee',

      })
    }
  }
</script>

<style>
  .edui-popup, .edui-default {
    color: #424242 !important;
  }
</style>
